<!-- 字典数据 -->
<script setup lang="ts">
import {
    getDictPage,
    getDictFormData,
    addDict,
    updateDict,
    deleteDict,
} from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
import type { TabsPaneContext } from 'element-plus'
import { Search, DocumentCopy, Check, Plus, InfoFilled } from '@element-plus/icons-vue'
defineOptions({
    name: "DictData",
    inheritAttrs: false,
});

const input1 = ref(null)
const input2 = ref(null)

const value1 = ref(true)
const value2 = ref(true)
const value4 = ref(true)
const value5 = ref(true)
const switchValue = ref(false); // 响应式变量保存开关状态
const switchValue2 = ref(false);
const switchValue3 = ref(false);

const copy = ref('56');
const copy2 = ref('kys-6UMzIihJ1U-CW4yMTBMEU');
const showCheckIcon = ref(false);
const showCheckIcon2 = ref(false);
const centerDialogVisible = ref(false)
const centerDialogVisible2 = ref(false)
const centerMoney = ref(false)
const inputIp = ref('');

const tags = ref([
])
/* 复制函数 */
const onCopyClick = () => {
    navigator.clipboard.writeText(copy.value)
        .then(() => {
            ElMessage({
                message: '复制成功',
                type: 'success',
            });
            console.log('复制成功');
            showCheckIcon.value = true;
        })
        .catch((err) => {
            ElMessage.error('复制失败');
            console.error('复制失败', err);
        });
};
const onCopyClick2 = () => {
    navigator.clipboard.writeText(copy2.value)
        .then(() => {
            ElMessage({
                message: '复制成功',
                type: 'success',
            })
            console.log('复制成功');
            showCheckIcon2.value = true;
        })
        .catch((err) => {
            ElMessage.error('复制失败')
            console.error('复制失败', err);
        });
};

/* 复制的图标切换 */

const toggleIcon = () => {
    showCheckIcon.value = !showCheckIcon.value;
};
const toggleIcon2 = () => {
    showCheckIcon2.value = !showCheckIcon2.value;
};

/* 添加调用IP */
const handleAddIp = () => {
    if (inputIp.value.trim() !== '') {
        tags.value.push({ name: inputIp.value, type: '' });
        inputIp.value = ''; // 清空输入框
    }
    centerDialogVisible2.value = false; // 关闭弹窗
};
const removeTag = (index) => {
    tags.value.splice(index, 1);
};


/* 文本域默认显示 */
const jsonData = {
  "amountScale": 100,
  "balanceQueryAmountScala": 100,
  "balanceQueryHttpMethod": "POST/JSON",
  "balanceQueryKeySign": "sign",
  "cashierDesk": false,
  "channelHttpMethod": "POST/FORM",
  "channelKeySign": "sign",
  "channelSignAlgorithm": "after|&key=${secret}|md5|lower",
  "channelWord": "basic",
  "extension": "{}",
  "notifyAmountScala": 100,
  "notifyErrorMsg": "msg",
  "notifySuccessConfirm": false,
  "notifySuccessResponse": "SUCCESS",
  "notifyType": "ALL",
  "orderExpireMinute": 10,
  "preCashdesk": false,
  "queryAmountScala": 100,
  "queryErrorMsg": "msg",
  "queryHttpMethod": "POST/FORM",
  "queryKeySign": "sign",
  "querySuccessFlag": "code=200",
  "requestTimeoutSecond": 10,
  "resultChannelNo": "orderNo",
  "resultErrorMsg": "msg",
  "resultPayUrl": "payUrl",
  "resultSuccessFlag": "code=200",
  "resultType": "json"
};

const jsonString = ref(JSON.stringify(jsonData, null, 2));

/* 选择框切换 */
const op = ref('指定费率')
const rateop = [
    {
        value: '指定费率',
        label: '指定费率',
    },
    {
        value: '单笔费额',
        label: '单笔费额',
    },
    {
        value: '组合收费',
        label: '组合收费',
    },
]
const op2 = ref('指定费率')
const rateop2 = [
    {
        value: '指定费率',
        label: '指定费率',
    },
    {
        value: '单笔费额',
        label: '单笔费额',
    },
    {
        value: '组合收费',
        label: '组合收费',
    },
]


const props = defineProps({
    typeCode: {
        type: String,
        default: () => {
            return "";
        },
    },
    typeName: {
        type: String,
        default: () => {
            return "";
        },
    },
});

watch(
    () => props.typeCode,
    (newVal: string) => {
        queryParams.typeCode = newVal;
        formData.typeCode = newVal;
        resetQuery();
    }
);


/* 编辑-常规 */
const value3 = ref()
const options3 = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
]
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<DictQuery>({
    pageNum: 1,
    pageSize: 10,
    typeCode: props.typeCode,
});

//const dictList = ref<DictPageVO[]>();

/* tab页 */
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const dialog = reactive({
    title: "",
    visible: false,
});

const formData = reactive<DictForm>({
    status: 1,
    typeCode: props.typeCode,
    sort: 1,
    radio: '元',
    radio2: 'JSON',
});

const rules = reactive({
    name: [{ required: true, message: "", trigger: "blur" }],
    value: [{ required: true, message: "", trigger: "blur" }],
    supplierConfig: [{ required: true, message: "", trigger: "blur" }],
    limited: [{ required: true, message: "", trigger: "blur" }],
    type: [{ required: true, message: "", trigger: "blur" }],
    diaoyong: [{ required: true, message: "", trigger: "blur" }],
});

/**
 * 查询
 */
function handleQuery() {
    if (queryParams.typeCode) {
        loading.value = true;
        getDictPage(queryParams)
            .then(({ data }) => {
                dictList.value = data.list;
                total.value = data.total;
            })
            .finally(() => (loading.value = false));
    }
}

/**
 * 重置查询
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    handleQuery();
}

/**
 * 行checkbox change事件
 *
 * @param selection
 */
function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id);
}

/**
 * 打开字典表单弹窗
 *
 * @param dictId 字典ID
 */
function openDialog(dictId?: number) {
    dialog.visible = true;
    if (dictId) {
        dialog.title = "修改字典";
        getDictFormData(dictId).then(({ data }) => {
            Object.assign(formData, data);
        });
    } else {
        dialog.title = "新增字典";
    }
}

/**
 * 字典表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            loading.value = false;
            const dictId = formData.id;
            if (dictId) {
                updateDict(dictId, formData)
                    .then(() => {
                        ElMessage.success("修改成功");
                        closeDialog();
                        resetQuery();
                    })
                    .finally(() => (loading.value = false));
            } else {
                addDict(formData)
                    .then(() => {
                        ElMessage.success("新增成功");
                        closeDialog();
                        resetQuery();
                    })
                    .finally(() => (loading.value = false));
            }
        }
    });
}

/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();

    formData.id = undefined;
    formData.status = 1;
    formData.sort = 1;
    formData.typeCode = props.typeCode;
}

/**
 * 删除字典
 */
function handleDelete(dictId?: number) {
    const dictIds = [dictId || ids.value].join(",");
    if (!dictIds) {
        ElMessage.warning("请勾选删除项");
        return;
    }

    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteDict(dictIds).then(() => {
            ElMessage.success("删除成功");
            resetQuery();
        });
    });
}

onMounted(() => {
    handleQuery();
});


/* 静态表格字段 */
const dictList = ref([
    /*  {
         name: '商户1',
         value: 'M100001',
     },
     {
         name: '商户2',
         value: 'M100002',
     },
     {
         name: '商户3',
         value: 'M100003',
     }, */


]);
</script>

<template>
    <div class="app-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-top: -30px;">
            <el-tab-pane label="常规配置" name="first">
                <div class="main" style="width: 100%;display: flex;">
                    <div class="left" style="width: 100%;max-height: 400px;overflow-y: auto;">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <div style="display: flex;">
                                <el-form-item label="通道名称" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入通道名称" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="支付产品" prop="name">
                                    <el-select v-model="value3" class="" placeholder="请选择支付产品" size="default"
                                        style="width: 300px;margin-left: -0px;">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="通道编码" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入通道编码" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="调用代码" prop="">
                                    <el-input v-model="formData.code" placeholder="" value="basic" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="上级代理" prop="superiorAgent" style="margin-right: 50px;">
                                    <el-select v-model="value3" class="" placeholder="请选择上级代理" size="default"
                                        style="width: 300px;margin-left: -0px;">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="配置信息" prop="supplierConfig" style="">
                                    <el-switch v-model="switchValue" inline-prompt active-text="启用" inactive-text="禁用"
                                        style="margin-right: 15px;" />
                                    供应商配置
                                </el-form-item>
                            </div>

                            <el-form-item label="成本费率" prop="" style="display: flex; align-items: center;">
                                <el-select v-model="op" class="m-2" placeholder="" size="default"
                                    style="width: 150px; margin-left: -0px;">
                                    <el-option v-for="item in rateop" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <!-- 当选择的值是 '指定费率' 时显示第一个输入框 -->
                                <el-input v-if="op === '指定费率'" v-model="input1" style="width: 120px; margin-right: 15px;"
                                    type="number">
                                    <template #append>
                                        <el-button>%</el-button>
                                    </template>
                                </el-input>
                                <el-input v-if="op === '组合收费'" v-model="input1" style="width: 120px; margin-right: 15px;"
                                    type="number">
                                    <template #append>
                                        <el-button>%</el-button>
                                    </template>
                                </el-input>
                                <el-input v-if="op === '组合收费'" v-model="input2" style="width: 120px;">
                                    <template #append>
                                        <el-button>￥</el-button>
                                    </template>
                                </el-input>
                                <!-- 当选择的值是 '组合收费' 时显示第二个输入框 -->
                                <el-input v-else-if="op === '单笔费额'" v-model="input2" style="width: 120px;">
                                    <template #append>
                                        <el-button>￥</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="代理返佣" prop="" style="display: flex; align-items: center;">
                                <el-select v-model="op2" class="m-2" placeholder="" size="default"
                                    style="width: 150px; margin-left: -0px;">
                                    <el-option v-for="item in rateop2" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <!-- 当选择的值是 '指定费率' 时显示第一个输入框 -->
                                <el-input v-if="op2 === '指定费率'" v-model="input3" style="width: 120px; margin-right: 15px;"
                                    type="number">
                                    <template #append>
                                        <el-button>%</el-button>
                                    </template>
                                </el-input>
                                <el-input v-if="op2 === '组合收费'" v-model="input3" style="width: 120px; margin-right: 15px;"
                                    type="number">
                                    <template #append>
                                        <el-button>%</el-button>
                                    </template>
                                </el-input>
                                <el-input v-if="op2 === '组合收费'" v-model="input4" style="width: 120px;">
                                    <template #append>
                                        <el-button>￥</el-button>
                                    </template>
                                </el-input>
                                <!-- 当选择的值是 '组合收费' 时显示第二个输入框 -->
                                <el-input v-else-if="op2 === '单笔费额'" v-model="input4" style="width: 120px;">
                                    <template #append>
                                        <el-button>￥</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>

                            <div style="display: flex;">
                                <el-form-item label="日总限额" prop="name" style="margin-right: 50px;margin-left:-15px">
                                    <el-tooltip placement="top">
                                        <template #content>设置为0，表示不限额</template>
                                        <el-icon style="margin-left:-7px;margin-right:7px">
                                            <InfoFilled />
                                        </el-icon>
                                    </el-tooltip>
                                    <el-input v-model="formData.code" placeholder="" style="width: 300px;">
                                        <template #prepend>
                                            <el-button>￥</el-button>
                                        </template>
                                    </el-input>
                                </el-form-item>

                                <el-form-item label="流量控制" prop="name" style="margin-left:-10px">
                                    <el-tooltip placement="top">
                                        <template #content>设置为0，表示不限制</template>
                                        <el-icon style="margin-left:-7px;margin-right:7px">
                                            <InfoFilled />
                                        </el-icon>
                                    </el-tooltip>
                                    <el-input v-model="formData.code" placeholder="" style="width: 300px;" type="number">
                                        <template #append>
                                            <el-button>秒内不能重复下单</el-button>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="请求超时" prop="name" style="margin-right: 50px;margin-left:-15px">
                                    <el-tooltip placement="top">
                                        <template #content>可设置为5，10，15，20</template>
                                        <el-icon style="margin-left:-7px;margin-right:7px">
                                            <InfoFilled />
                                        </el-icon>
                                    </el-tooltip>
                                    <el-select v-model="value3" class="" placeholder="请选择支付产品" size="default"
                                        style="width: 300px;margin-left: -0px;">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="订单过期" prop="name" style="margin-left:-10px">
                                    <el-input v-model="formData.code" placeholder="" style="width: 300px;" type="number">
                                        <template #append>
                                            <el-button>分钟</el-button>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <el-form-item label="限额类型" prop="type" style="display: flex;align-items: center;">
                                <template #default="scope">
                                    <el-radio-group v-model="formData.status">
                                        <el-radio :label="1">区间金额</el-radio>
                                        <el-radio :label="0">固定金额</el-radio>
                                    </el-radio-group>
                                </template>
                            </el-form-item>

                            <el-form-item label="单笔限额" prop="limited" style="display: flex;align-items: center;">
                                <template #default="scope">
                                    <div v-if="formData.status === 1" style="display: flex;">
                                        <el-input v-model="input5" style="width: 200px;" type="number">
                                            <template #prepend>
                                                <el-button>￥</el-button>
                                            </template>
                                        </el-input>
                                        &emsp;~&emsp;
                                        <el-input v-model="input6" style="width: 200px;" type="number">
                                            <template #prepend>
                                                <el-button>￥</el-button>
                                            </template>
                                        </el-input>
                                    </div>
                                    <div v-else>
                                        <el-tag v-for="(tag, index) in tags" :key="index" class="mx-1" closable
                                            :type="tag.type" style="margin-top: 10px;" @close="removeTag(index)">
                                            {{ tag.name }}
                                        </el-tag>
                                        <el-button type="primary" style="margin-top: 10px;float: right;"
                                            @click="centerMoney = true">
                                            <el-icon style="">
                                                <Plus />
                                            </el-icon>
                                        </el-button>
                                    </div>
                                </template>
                            </el-form-item>

                            <div style="display: flex;justify-content:space-between">
                                <el-form-item label="落地跳转" prop="supplierConfig" style="">
                                    <el-switch v-model="switchValue" inline-prompt active-text="启用" inactive-text="禁用"
                                        style="margin-right: 15px;" />
                                </el-form-item>
                                <el-form-item label="收银台" prop="supplierConfig" style="">
                                    <el-switch v-model="switchValue2" inline-prompt active-text="启用" inactive-text="禁用"
                                        style="margin-right: 15px;" />
                                </el-form-item>
                                <el-form-item label="通道状态" prop="supplierConfig" style="margin-right:100px">
                                    <el-switch v-model="switchValue3" inline-prompt active-text="启用" inactive-text="禁用"
                                        style="margin-right: 15px;" />
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="接入参数" name="second">
                <div class="main" style="width: 100%;display: flex;">
                    <div class="left" style="width: 100%;max-height: 400px;overflow-y: auto;">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <div style="display: flex;">
                                <el-form-item label="支付网关" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付网关" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="请求方式" prop="name" style="margin-right: 50px;">
                                    <el-select v-model="value3" class="" placeholder="请输入请求方式" size="default"
                                        style="width: 300px;margin-left: -0px;">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="金额单位" prop="">
                                    <el-radio v-model="formData.radio" label="元">
                                        <span style="">元</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio" label="角">
                                        <span style="">角</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio" label="分">
                                        <span style="">分</span>
                                    </el-radio>
                                    <el-switch v-model="switchValue" inline-prompt active-text="禁止小数金额"
                                        inactive-text="禁止小数金额" style="margin-right: 15px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="商户ID" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入商户ID" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="应用ID" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入应用ID" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="上游编码" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入上游编码" style="width: 800px;" />
                                </el-form-item>
                            </div>
                            <div style="display: flex;">
                                <el-form-item label="接口密钥" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入接口密钥" style="width: 800px;" />
                                </el-form-item>
                            </div>
                            <div style="display: flex;">
                                <el-form-item label="签名算法" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入签名算法" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="margin-left:100px;color:gray">
                                <p style="line-height:16px"> *
                                    格式：before/after/concat|&key=${secret}/appid.type.amount.secret|md5/sha1/sha256|upper/lower
                                </p>
                                <p style="line-height:16px"> * 示例1：after|&key=${secret}|md5|lower</p>
                                <p style="line-height:16px"> *
                                    示例2：join|=,&,fxid.fxddh.fxfee.fxnotifyurl,&${secret}|md5|lower</p>
                                <p style="line-height:16px">* 示例3：concat|fxid.fxddh.fxfee.fxnotifyurl.secret|md5|lower</p>
                                <p style="line-height:16px">* 示例4：chain|&,fxid.fxddh.fxfee.fxnotifyurl.secret|md5|lower</p>
                                <p style="line-height:16px">* 示例5：sort|key|md5|lower</p>
                                <p style="line-height:16px">* 示例6：afterMd5|&key=${secret}|md5|lower</p>
                                <p style="line-height:16px">* 示例6：afterNoConcat|&key=${secret}|md5|lower</p>
                                <p style="line-height:16px">* 示例7：afterUrlEncode|&key=${secret}|md5|lower</p>
                            </div>

                            <el-form-item label="请求头">
                                <el-input v-model="formData.remark" type="textarea" placeholder="请输入请求头"
                                    :autosize="{ minRows: 4, maxRows: 4 }" />
                            </el-form-item>
                            <el-form-item label="固定参数">
                                <el-input v-model="formData.remark" type="textarea" placeholder="{}"
                                    :autosize="{ minRows: 4, maxRows: 4 }" />
                            </el-form-item>

                        </el-form>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="形参列表" name="third">
                <div class="main" style="width: 100%;max-height: 400px;overflow-y: auto;display: flex;">
                    <div class="left">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <el-form-item label="商户ID" prop="">
                                <el-input v-model="formData.code" placeholder="请输入商户ID" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="用户ID" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入应用ID" />
                            </el-form-item>
                            <el-form-item label="系统订单号" prop="">
                                <el-input v-model="formData.code" placeholder="请输入系统订单号" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="毫秒时间戳" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入毫秒时间戳" />
                            </el-form-item>

                            <div style="margin-left:100px">
                                <p style="line-height:16px;color:gray">* 格式：payTime | payTime/1000 | </p>
                                <p style="line-height:16px;color:gray;">payTime/1000.string</p>
                            </div>

                            <el-form-item label="回调地址" prop="">
                                <el-input v-model="formData.code" placeholder="请输入回调地址" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="用户姓名" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入用户姓名" />
                            </el-form-item>

                            <el-form-item label="用户姓" prop="">
                                <el-input v-model="formData.code" placeholder="请输入用户姓" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="用户邮箱" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入用户邮箱" />
                            </el-form-item>
                            <el-form-item label="参数签名" prop="">
                                <el-input v-model="formData.code" placeholder="请输入参数签名" style="width:350px" />
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="right">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <el-form-item label="应用ID" prop="">
                                <el-input v-model="formData.code" placeholder="请输入应用ID" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="用户IP" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入用户IP" style="width:350px" />
                            </el-form-item>

                            <el-form-item label="订单金额" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入订单金额" style="width:350px" />
                            </el-form-item>

                            <el-form-item label="格式化时间" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入格式化时间" style="width:350px" />
                            </el-form-item>

                            <div style="margin-left:100px;margin-bottom:43px">
                                <p style="line-height:16px;color:gray">* 格式：payDate=yyyy-MM-dd HH:mm:ss</p>
                            </div>

                            <el-form-item label="跳转地址" prop="">
                                <el-input v-model="formData.code" placeholder="请输入跳转地址" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="用户手机号" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入用户手机号" style="width:350px" />
                            </el-form-item>

                            <el-form-item label="用户名" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入用户名" style="width:350px" />
                            </el-form-item>

                            <el-form-item label="上游编码" prop="" style="display: flex;align-items: center;">
                                <el-input v-model="formData.code" placeholder="请输入上游编码" style="width:350px" />
                            </el-form-item>

                        </el-form>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="调用解析" name="fourth">
                <div class="main" style="width: 100%;display: flex;">
                    <div class="left" style="width: 100%;max-height: 400px;overflow-y: auto;">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <el-form-item label="调用解析" prop="diaoyong">
                                <el-radio v-model="formData.radio2" label="JSON">
                                    <span style="">JSON</span>
                                </el-radio>
                                <el-radio v-model="formData.radio2" label="HTML">
                                    <span style="">HTML</span>
                                </el-radio>
                                <el-radio v-model="formData.radio2" label="XML">
                                    <span style="">XML</span>
                                </el-radio>
                                <el-radio v-model="formData.radio2" label="TXT">
                                    <span style="">TXT</span>
                                </el-radio>
                            </el-form-item>

                            <div style="display: flex;">
                                <el-form-item label="成功标记" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入成功标记" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="失败信息" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入成功标记" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="支付链接" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付链接" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="应用ID" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入应用ID" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="通道订单号" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入通道订单号" style="width: 800px;" />
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="回调解析" name="fifth">
                <div class="main" style="width: 100%;display: flex;">
                    <div class="left" style="width: 100%;max-height: 400px;overflow-y: auto;">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <div style="display: flex;">
                                <el-form-item label="请求方式" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入成功标记" style="width: 300px;" />
                                </el-form-item>

                                <el-form-item label="金额单位" prop="diaoyong">
                                    <el-radio v-model="formData.radio2" label="JSON">
                                        <span style="">JSON</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio2" label="HTML">
                                        <span style="">HTML</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio2" label="XML">
                                        <span style="">XML</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio2" label="TXT">
                                        <span style="">TXT</span>
                                    </el-radio>
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="回调IP" prop="name" style="margin-right: 50px;">
                                    <el-tag v-for="(tag, index) in tags" :key="index" class="mx-1" closable :type="tag.type"
                                        style="margin-top: 10px;" @close="removeTag(index)">
                                        {{ tag.name }}
                                    </el-tag>
                                    <el-button type="primary" style="margin-top: 10px;float: right;"
                                        @click="centerMoney = true">
                                        <el-icon style="">
                                            <Plus />
                                        </el-icon>
                                    </el-button>
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="系统订单号" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入系统订单号" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="实际支付金额" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入通道订单号" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="支付时间" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入通道订单号" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="签名参数" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入通道订单号" style="width: 300px;" />
                                </el-form-item>
                            </div>
                            <div style="margin-left:100px">
                                <p style="color:gray;">* 格式：payDate=yyyy-MM-dd HH:mm:ss</p>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="签名算法" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入签名算法" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="成功二次确认" prop="" style="margin-right: 50px;">
                                    <el-switch v-model="switchValue" inline-prompt active-text="启用" inactive-text="禁用"
                                        style="margin-right: 15px;" />
                                </el-form-item>
                            </div>
                            <el-form-item label="失败信息" prop="" style="margin-right: 50px;">
                                <el-input v-model="formData.code" placeholder="msg" style="width: 800px;" />
                            </el-form-item>

                            <div style="display: flex;">
                                <el-form-item label="支付成功标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付成功标记" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="支付失败标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付失败标记" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <el-form-item label="回调响应" prop="remark">
                                <el-input v-model="formData.remark" type="textarea" placeholder="SUCCESS"
                                    :autosize="{ minRows: 8, maxRows: 8 }" />
                            </el-form-item>
                        </el-form>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="订单查询" name="sixth">
                <div class="main" style="width: 100%;display: flex;">
                    <div class="left" style="width: 100%;max-height: 400px;overflow-y: auto;">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <div style="display: flex;">
                                <el-form-item label="查询网关" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付网关" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="请求方式" prop="name" style="margin-right: 50px;">
                                    <el-select v-model="value3" class="" placeholder="请输入请求方式" size="default"
                                        style="width: 300px;margin-left: -0px;">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="金额单位" prop="">
                                    <el-radio v-model="formData.radio" label="元">
                                        <span style="">元</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio" label="角">
                                        <span style="">角</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio" label="分">
                                        <span style="">分</span>
                                    </el-radio>
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="商户ID" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入商户ID" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="应用ID" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入应用ID" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="系统订单号" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入系统订单号" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="通道订单号" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入通道订单号" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="毫秒时间戳" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入系统订单号" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="格式化时间" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入格式化时间" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display:flex;">
                                <div style="margin-left:100px">
                                    <p style="line-height:16px;color:gray">* 格式：payTime | payTime/1000 | </p>
                                    <p style="line-height:16px;color:gray;">payTime/1000.string</p>
                                </div>

                                <div style="margin-left:240px;margin-bottom:43px">
                                    <p style="line-height:16px;color:gray">* 格式：payDate=yyyy-MM-dd HH:mm:ss</p>
                                </div>
                            </div>
                            <div style="display: flex;">
                                <el-form-item label="参数签名" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入参数签名" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="订单金额" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入订单金额" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="签名算法" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入签名算法" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="失败信息" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入失败信息" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="查询成功标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入查询成功标记" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="实际支付金额" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入实际支付金额" style="width: 300px;" />
                                </el-form-item>
                            </div>
                            <div style="display: flex;">
                                <el-form-item label="支付成功标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="支付成功标记" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="支付失败标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付失败标记" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="支付中标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付中标记" style="width: 300px;" />
                                </el-form-item>
                            </div>
                            <el-form-item label="查询请求头">
                                <el-input v-model="formData.remark" type="textarea" placeholder="请输入请求头"
                                    :autosize="{ minRows: 4, maxRows: 4 }" />
                            </el-form-item>
                            <el-form-item label="查询固定参数">
                                <el-input v-model="formData.remark" type="textarea" placeholder="请输入查询固定参数"
                                    :autosize="{ minRows: 4, maxRows: 4 }" />
                            </el-form-item>

                        </el-form>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="账户查询" name="seventh">
                <div class="main" style="width: 100%;display: flex;">
                    <div class="left" style="width: 100%;max-height: 400px;overflow-y: auto;">
                        <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                            <div style="display: flex;">
                                <el-form-item label="查询网关" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付网关" style="width: 800px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="请求方式" prop="name" style="margin-right: 50px;">
                                    <el-select v-model="value3" class="" placeholder="请输入请求方式" size="default"
                                        style="width: 300px;margin-left: -0px;">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="金额单位" prop="">
                                    <el-radio v-model="formData.radio" label="元">
                                        <span style="">元</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio" label="角">
                                        <span style="">角</span>
                                    </el-radio>
                                    <el-radio v-model="formData.radio" label="分">
                                        <span style="">分</span>
                                    </el-radio>
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="商户ID" prop="name" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入商户ID" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="应用ID" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入应用ID" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="毫秒时间戳" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入系统订单号" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="格式化时间" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入格式化时间" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display:flex;">
                                <div style="margin-left:100px">
                                    <p style="line-height:16px;color:gray">* 格式：payTime | payTime/1000 | </p>
                                    <p style="line-height:16px;color:gray;">payTime/1000.string</p>
                                </div>

                                <div style="margin-left:240px;margin-bottom:43px">
                                    <p style="line-height:16px;color:gray">* 格式：payDate=yyyy-MM-dd HH:mm:ss</p>
                                </div>
                            </div>
                            <div style="display: flex;">
                                <el-form-item label="参数签名" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入参数签名" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="失败信息" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入失败信息" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="签名算法" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入签名算法" style="width: 800px;" />
                                </el-form-item>

                            </div>

                            <div style="display: flex;">
                                <el-form-item label="查询成功标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入查询成功标记" style="width: 800px;" />
                                </el-form-item>

                            </div>
                            <div style="display: flex;">
                                <el-form-item label="账户余额" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="支付账户余额" style="width: 300px;" />
                                </el-form-item>
                                <el-form-item label="账户描述" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入账户描述" style="width: 300px;" />
                                </el-form-item>
                            </div>

                            <div style="display: flex;">
                                <el-form-item label="支付中标记" prop="" style="margin-right: 50px;">
                                    <el-input v-model="formData.code" placeholder="请输入支付中标记" style="width: 300px;" />
                                </el-form-item>
                            </div>
                            <el-form-item label="查询请求头">
                                <el-input v-model="formData.remark" type="textarea" placeholder="请输入请求头"
                                    :autosize="{ minRows: 4, maxRows: 4 }" />
                            </el-form-item>
                            <el-form-item label="查询固定参数">
                                <el-input v-model="formData.remark" type="textarea" placeholder="请输入查询固定参数"
                                    :autosize="{ minRows: 4, maxRows: 4 }" />
                            </el-form-item>

                        </el-form>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="通道备注" name="eighth">
                <div class="main" style="width: 100%;max-height: 400px;overflow-y: auto;">
                    <el-form-item label="" style="max-height: 400px;overflow-y: auto;">
                        <el-input v-model="formData.remark" type="textarea" placeholder="请输入通道备注"
                            :autosize="{ minRows: 30, maxRows: 100 }" />
                    </el-form-item>
                </div>
            </el-tab-pane>
            <el-tab-pane label="快捷对接" name="ninth">
                <div class="main" style="width: 100%;max-height: 400px;overflow-y: auto;">
                    <el-form-item label="" style="max-height: 400px;overflow-y: auto;">
                        <el-input v-model="jsonString" type="textarea" placeholder="请输入通道备注"
                            :autosize="{ minRows: 30, maxRows: 100 }">
                        </el-input>
                    </el-form-item>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 添加登录IP -->
        <el-dialog v-model="centerDialogVisible" title="添加调用IP" width="500px" align-center>
            <el-form ref="" :model="formData" :rules="rules" label-width="80px">
                <el-form-item label="登录IP" prop="name">
                    <el-input v-model="formData.code" placeholder="请输入登录IP" />
                </el-form-item>
                <el-form-item label="有效期" prop="code">
                    <el-input v-model="formData.code" type="number" placeholder="请输入有效期">
                        <template #append>
                            <el-button>天</el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="formData.remark" type="textarea" placeholder="请输入"
                        :autosize="{ minRows: 4, maxRows: 6 }" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加调用IP -->
        <el-dialog v-model="centerDialogVisible2" title="添加登录IP" width="500px" align-center>
            <el-form ref="" :model="formData" :rules="rules">
                <el-form-item label="" prop="name">
                    <el-input v-model="inputIp" placeholder="请输入调用IP" />
                </el-form-item>
                <p style="color: gray;">新增多条调用IP可以在输入框用逗号隔开，如1，2，3</p>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="handleAddIp">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 单笔限额 添加金额-->
        <el-dialog v-model="centerMoney" title="添加金额" width="500px" align-center>
            <el-form ref="" :model="formData" :rules="rules">
                <el-form-item label="" prop="name">
                    <el-input v-model="inputIp" placeholder="请输入金额" />
                </el-form-item>
                <p style="color: gray;">新增多条金额可以在输入框用逗号隔开，如50，100，200，500</p>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerMoney = false">取消</el-button>
                    <el-button type="primary" @click="handleAddIp">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}</style>
